<template>
<div class="goodsrecycle-mokuai"> 
<div class="mokuai-top">
<div class="mokuai-auto">
    <!-- 左边div框 -->
<div class="mokuai-left">
    <!-- 头像 -->
<div class="mokuai-left-icon">
  <el-row class="demo-avatar demo-basic">
    <el-col :span="16">
      <div class="demo-basic--circle">
        <div class="block"><el-avatar :size="70" :src="circleUrl"></el-avatar></div>
      </div>
        <div class="sub-title">{{table.userName}}</div>
    </el-col>  
   
  </el-row>
</div>
<div class="mokuai-left-content" >
<p>商品：<span class="color-blue">{{table.spuName}}</span></p>
<el-rate
  v-model="table.appaiseImg"
  :max="3"
  disabled
 >
</el-rate>

<p>日期：<span>{{table.appaiseCreateTime}}</span></p>
<p>IP地址:<span>{{table.ip}}</span></p>
</div>
</div>



  <!-- 右边div框 -->
<div class="mokuai-right">
  <!-- 第一模块 -->
<div class="mokuai-right-plate">
  <div class="mokuai-right-auto">
    <div class="mokuai-right-caption">
      <div class="mokuai-right-caption-font float-left">
        <i class="el-icon-star-on"></i>
        收藏 <span>1000</span>
      </div>
       <div class="mokuai-right-caption-font float-left caption-marginleft">
        <i class="el-icon-view"></i>
        阅读 <span>1000</span>
      </div>
         <div class="mokuai-right-caption-font float-right">
     <el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button>
      </div>
    </div>
    <div class="mokuai-right-content">
        <!-- 段落 -->
      <div>

        <p>
          {{table.appaiseFont}}
        </p>
      <!-- <p>
棉布莱卡的出现，不过使内衣面料又多了一种选择与表现。最舒适的面料仍当数棉布，今天的女性依然偏爱棉质内衣，这因为棉布本身独一无二的透气性和天然性，使穿着感受绝不同于其他面料。从美感来说，平织棉布的印花效果和针织棉布的染色效果，都有一种天然纯朴和青春气息，为其他面料所难取代。</p>
      <p>丝绒比棉布更久远，但用于内衣较晚的是丝绒。丝绒又具有棉布所没有的典雅华贵。丝绒的天然滑爽感，也是莱卡所缺少的。 化纤原料 涤纶、尼龙、氨纶类化纤原料，虽在弹性方面较莱卡差些，但仍各自具有吸湿性、不变形、伸缩性等特点，为莱卡所不能取代。

</p>
      <p>棉布莱卡的出现，不过使内衣面料又多了一种选择与表现。最舒适的面料仍当数棉布，今天的女性依然偏爱棉质内衣，这因为棉布本身独一无二的透气性和天然性，使穿着感受绝不同于其他面料。从美感来说，平织棉布的印花效果和针织棉布的染色效果，都有一种天然纯朴和青春气息，为其他面料所难取代。</p>
      <p>丝绒比棉布更久远，但用于内衣较晚的是丝绒。丝绒又具有棉布所没有的典雅华贵。丝绒的天然滑爽感，也是莱卡所缺少的。 化纤原料 涤纶、尼龙、氨纶类化纤原料，虽在弹性方面较莱卡差些，但仍各自具有吸湿性、不变形、伸缩性等特点，为莱卡所不能取代。</p> -->
      </div>
      <!-- 图片 -->
      <div class="mokuai-top">
<div class="demo-image">
  <div class="block img-array" v-for="item in url" :key="item">
    <el-image
      style="width: 80px; height: 80px"
      :src="item"
      :fit="fits.fill"></el-image>
  </div>
   
</div>

      </div>
    </div>
  </div>
</div>
<!-- 第二模块 -->
<div class="mokuai-right-plate" v-if="table.appaiseReply==null">
  <div class="mokuai-right-auto">
     <div class="mokuai-right-caption">
      <div class="mokuai-right-caption-font">
        <i class="el-icon-top-left"></i>
        回复评论
      </div>
    </div>
    <div class="mokuai-right-content">
    <div class="right-content-input">
       <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- <el-form-item label="用户名:" prop="username">
    <el-input v-model.number="ruleForm.username"></el-input>
  </el-form-item>
   <el-form-item label="Email:" prop="email">
    <el-input v-model.number="ruleForm.email"></el-input>
  </el-form-item> -->
  <el-form-item label="* 回复内容：" prop="textarea">
    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="ruleForm.textarea"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm(ruleForm)">确定</el-button>
    <span class="form-hint">注意：管理员回复内容会在前台显示</span>
  </el-form-item>
      </el-form>
    </div>
    </div>
  </div>
</div>
<!-- 第三模块 -->
<div class="mokuai-right-plate">
  <div class="mokuai-right-auto">
     <div class="mokuai-right-caption">
      <div class="mokuai-right-caption-font">
          <i class="el-icon-chat-dot-round"></i>
       全部评论 <span>100</span>
      </div>
    </div>
    <div class="mokuai-right-content">
      <div class="mokuai-right-content3-mk" v-for="itemA in tableAll" :key="itemA.id">
<!-- 头像 -->
        <div class="content3-mk-icon">
          <el-row class="demo-avatar demo-basic">
    <el-col :span="20">
      <div class="demo-basic--circle">
        <!-- 暂无数据 -->
        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
      </div>
    </el-col>  
  </el-row>
        </div>
        <!-- 评论部分 -->
        <div class="content3-mk-right" >
          <p>{{itemA.appaiseFont}}</p>
          <span v-if="itemA.appaiseReply==null">

        <el-button type="text" @click="reply(itemA)">回复</el-button>
          </span>
          <span v-if="itemA.appaiseReply!=null">
          <p>客服</p>
          <p>回复,{{itemA.userName}}: <span>{{itemA.appaiseReply}}</span></p>
          </span>
          <div class="content3-mk-right-button">{{itemA.appaiseCreateTime}} 
            <el-button type="text" @click="showData(itemA)">隐藏</el-button>
             <el-button type="text" @click="deleteData(itemA)">删除</el-button>
            </div>
        
        </div>
      </div>
     
    </div>

    <!-- 分页 -->
<div class="conlog-paging">
<div class="conlog-paging-layout">
<div class="block">
    <span class="demonstration"></span>
     <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
  </div>
 </div>
</div>
  </div>
</div>
</div>
</div>
</div>
</div>
</template>

<style>
/* 自定义css */

.demo-image{
  height: 90px;
}
.sub-title{
  margin-top:80px;
  margin-left: 50%;
}
.float-left{
  float:left;
}
.float-right{
  float:right;
}
.img-array{
display: inline-block;
margin-left:5px;
}
.caption-marginleft{
  margin-left:10px;
}
.color-blue{
    color: blue;
}
.goodsrecycle-mokuai{
  height: 2000px;
  background-color: rgb(249, 249, 249);
}
.mokuai-top{
    margin-top: 20px;
}
.mokuai-auto{
    width: 100%;
    margin:auto;
}
.mokuai-left{
width: 20%;
height: 1900px;
border-right: 1px solid rgb(9, 1, 17);

background-color: rgb(249, 249, 249);
float:left;
}
.mokuai-left-icon{
    text-align: center;
    margin-top: 80px;
     height: 150px;
  
}
.mokuai-left-content{
    margin-left: 20px;
    margin-top: 30px;
    font-size: 13px;
}
.mokuai-right{
 width:78%;
height: 1900px;

float:left;
background-color: white;
}
.mokuai-right-plate{
  margin-top:20px;
}
.mokuai-right-auto{
  width: 90%;
  margin:auto;
}
.mokuai-right-caption{
  width: 100%;
  height: 40px;
  border-bottom:1px solid black; 
}
.mokuai-right-caption-font{
  height: 40px;
  line-height: 40px;
  font-size:15px;
}

/* 第二模块 */
.right-content-input{
  margin-left: 40px;
  margin-top:20px;
  width: 50%;
}
.form-hint{
  font-size: 13px;
  margin-left:5px;
}
/* 第三模块 */
.mokuai-right-content3-mk{

  width: 100%;
  border-bottom:1px solid black; 
}
.content3-mk-icon{
margin-left: 30px;
margin-top:50px;
 display: inline-block;
}
.content3-mk-right{
 display: inline-block;
  margin-left:10px;
  width: 70%;
  font-size: 13px;
}
.content3-mk-right-button{
font-size: 13px;
}
/* 分页 */
.conlog-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
 .conlog-paging-layout{
  float: right;
  margin-top: 7px;
 }
</style>
<script>

import appraiseApi from "@/api/goods/appaise"
  export default {
    data () {
       // 表单
      var checkUername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入电话号码'));
          } else {
            if (value < 11) {
              callback(new Error('请输入手机号'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
 var checkEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入邮箱,暂时是数字'));
          } else {
            if (value < 11) {
              callback(new Error('请输入邮箱'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {

// 获取的商品id
spuId:'',

// 存放第一条数据

table:{},
        // 
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        // 图片
          fits: ['fill'],
          // 图片地址手动添加
          url: [],
           // 表单
         ruleForm: {
          username: '',
          email:'',
          textarea:'',
      
        },
         rules: {
           username: [
            { validator: checkUername, trigger: 'blur' }
          ],
           email: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          
        },

        // 
        // 评论数据
        tableAll:[],
         // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10],
       total: 5,
      currentPage1: 1,
      }
    },
    methods:{
       // 返回
         returnButton(){
                this.$router.replace({ path: "/goods/goodsEvaluation"});
            },
        submitForm(formName) {

          if(formName.textarea==""){
 this.$message("没有值");
 
          }else{
console.log(formName.textarea);

let appaise={
  id:this.table.id,
  appaiseReply:formName.textarea
}

this.update(appaise);

this.intdata(this.spuId);


           
          }
      
      },
      // 分页
      handleSizeChange(val) {
        this.pageSize=val;
      
      this.intdata(this.spuId);
      },
      handleCurrentChange(val) {
          this.currentPage1=val;
    this.intdata(this.spuId);
      },
// 隐藏
      showData(item){
let appaise={
  id:item.id,
  isShow:0,
}

        this.update(appaise);
      },
      // 删除
      deleteData(item){
 this.deleteOne(item.id);
      },

// 跟据商品id获取评价数据
      intdata(spuId){

        appraiseApi.getListBySpuId(this.currentPage1,this.pageSize,spuId).then(response=>{


          console.log(response);
          this.tableAll=response.data.data.list;
          this.total=response.data.data.total;

          this.table=response.data.data.list[0];

          // 获取图片列表
        
          this.url= this.table.appaiseUrl.split(",");
         
        })
      },
// 修改一条数据
      update(appaise){

        appraiseApi.updateOne(appaise).then(response=>{

          console.log(response);
          this.intdata(this.spuId);
             this.$message(response.data.message);
        })
      },

         //  单条删除
         deleteOne(id){
appraiseApi.deleteOne(id).then(response=>{


  console.log(response);
 this.intdata(this.spuId);
 this.$message(response.data.message);
})
         },

      // 回复
      reply(item){
this.table=item;

      }
    
    },
    created(){
this.spuId=parseInt(this.$route.query.spuId);
this.intdata(this.spuId);

    }
  }
</script>
